/* eslint-disable array-callback-return */
import { Tsrv } from '../config';

let startPoint = null;
let startItem = null;
let endPoint = {};
let startAnchorPointName = '';
let endAnchorPointName = '';

const endNode = null;
let activeItem = null;
let curInPoint = null;
const setEdgeLabelText = (
  P_startAnchorPointName: string,
  P_endAnchorPointName: string
): string => {
  switch (P_startAnchorPointName) {
    case 'ifYes':
      return 'YES';
    case 'ifNo':
      return 'NO';
    default:
      return '';
  }
};
export default {
  getEvents() {
    return {
      // 鼠标在元素内部移到时不断触发，不能通过键盘触发
      mousemove: 'onMousemove',
      // 鼠标按钮被释放弹起时触发，不能通过键盘触发
      mouseup: 'onMouseup'
      // 鼠标移入节点上方时触发
      // 'node:mouseover': 'onMouseover'
      // // 鼠标移出节点时触发
      // 'node:mouseleave': 'onMouseleave',
      // // 鼠标移入节点时触发
      // 'node:mouseenter': 'onMouseenter'
    };
  },

  onMouseup(e) {
    endAnchorPointName = e.target.attrs.anchorPointName;

    const deleteItem = () => {
      // 删除引导线不进栈
      this.graph.cfg.enabledStack = false;
      this.graph.removeItem(this.edge);
      this.graph.cfg.enabledStack = true;
    };
    // e传参不稳定，改endNode传入
    // const e = endNode;
    const item = e.item;
    if (item && item.getType() === 'node') {
      const group = item.getContainer();
      if (e.target.attrs.isInPoint) {
        const children = group.cfg.children;
        children.map(child => {
          if (
            child.attrs.isInPointOut &&
            child.attrs.parent === e.target.attrs.id
          ) {
            activeItem = child;
          }
        });
        curInPoint = e.target;
      } else if (e.target.attrs.isInPointOut) {
        activeItem = e.target;
        const children = group.cfg.children;
        children.map(child => {
          if (
            child.attrs.isInPoint &&
            child.attrs.id === e.target.attrs.parent
          ) {
            curInPoint = child;
          }
        });
      }
      if (activeItem) {
        const endX = parseInt(curInPoint.attrs.x, 10);
        const endY = parseInt(curInPoint.attrs.y, 10);
        endPoint = { x: endX, y: endY };
        if (this.edge) {
          deleteItem();
          const model = {
            id: `edge${Tsrv.utils.custUUID(16, 16)}`,
            type: 'edge',
            source: startItem,
            target: item,
            sourceId: startItem._cfg.id,
            targetId: item._cfg.id,
            start: startPoint,
            end: endPoint,
            startAnchorPointName,
            endAnchorPointName,
            shape: 'customPolyline',
            label: setEdgeLabelText(startAnchorPointName, endAnchorPointName),
            labelCfg: {
              autoRotate: true,
              position: 'center',
              style: {
                stroke: 'white',
                fontSize: 16,
                lineWidth: 10
              }
            }
          };
          // 如果重复连线在在 editor里处理
          this.compBox
            .getCompMergeName(this.compID, `editor`)
            .executeCommand('add', [model]);
        }
      } else {
        if (this.edge) {
          deleteItem();
        }
      }
    } else {
      if (this.edge) {
        deleteItem();
      }
    }
    this.graph.find('node', node => {
      const group = node.get('group');
      const children = group.cfg.children;
      children.map(child => {
        if (child.attrs.isInPointOut) {
          child.attr('opacity', '0');
        }
        if (child.attrs.isInPoint) {
          child.attr('opacity', '0');
        }
        if (child.attrs.isOutPoint) {
          child.attr('opacity', '0');
          child.attr('fill', '#fff');
        }
      });
    });
    if (startItem) {
      this.graph.setItemState(startItem, 'hover', false);
    }

    this.graph.paint();
    startPoint = null;
    startItem = null;
    endPoint = {};
    activeItem = null;
    curInPoint = null;
    // hover-node.ts设置成add-edge行为模式
    this.graph.setMode('edit');
  },
  onMousemove(e) {
    const graph: any = this.graph;
    const item = e.item;
    // 引导线不进栈
    graph.cfg.enabledStack = false;
    // 开始位置为空
    if (!startPoint) {
      graph.find('node', node => {
        const group = node.get('group');
        const children = group.cfg.children;
        children.map(child => {
          if (child.attrs.isInPointOut) {
            // 不透明度
            child.attr('opacity', '0.3');
          }
          if (child.attrs.isInPoint) {
            // 不透明度
            child.attr('opacity', '1');
          }
        });
      });
      const startX = parseInt(e.target.attrs.x, 10);
      const startY = parseInt(e.target.attrs.y, 10);
      startPoint = { x: startX, y: startY };
      startAnchorPointName = e.target.attrs.anchorPointName;

      startItem = item;
      this.edge = graph.addItem('edge', {
        source: item,
        target: item,
        start: startPoint,
        end: startPoint,
        // type: 'customPolyline'
        type: 'line'
      });
    } else {
      const point = { x: e.x, y: e.y };
      if (this.edge) {
        // 增加边的过程中，移动时边跟着移动
        graph.updateItem(this.edge, {
          // start: startPoint,
          target: point
        });
      }
    }

    graph.cfg.enabledStack = true;
  }
  // ,onMouseover(e) {
  //   endNode = e;
  //   // const item = e.item;
  //   // if (item && item.getType() === "node") {
  //   //   if (e.target.attrs.isInPointOut && !this.hasTran) {
  //   //     this.hasTran = true;
  //   //     // e.target.transform([
  //   //     transform([
  //   //       ["t", 0, 3],
  //   //       ["s", 1.2, 1.2]
  //   //     ]);
  //   //   }
  //   //   graph.paint();
  //   // }
  // },
  // onMouseleave(e) {
  //   // graph.find('node', node => {
  //   //   const group = node.get('group');
  //   //   const children = group.cfg.children;
  //   //   children.map(child => {
  //   //     if (child.attrs.isInPointOut) {
  //   //       child.resetMatrix();
  //   //     }
  //   //   });
  //   // });
  //   // this.hasTran = false;
  //   // graph.paint();
  // },
  // onMouseenter(e) {
  // }
};
